<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  */
        .image-size {
            width: 400px;
        }

        img.active {
            cursor: default;
            z-index: 1;
            display: inline-block;
            vertical-align: bottom;
            font-size: 12px;
            border: 3px solid transparent;
            border-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23914AFF' d='M2.5 2.5h25v25h-25z'/%3E%3Cpath d='M0 0v12h2V2h10V0H0zM0 30V18h2v10h10v2H0zM30 0H18v2h10v10h2V0zM30 30H18v-2h10V18h2v12z' fill='%23914AFF'/%3E%3C/svg%3E") 12 / 12px / 0;
            margin: -1px;
            position: relative;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>

    <img class="image-size" src="https://pic1.zhimg.com/v2-d58ce10bf4e01f5086c604a9cfed29f3_r.jpg?source=1940ef5c"
        alt="拉伸">

    <script>
        const image = document.getElementsByClassName('image-size')[0]


        image.onclick = (e) => {
            if (image.classList.contains('active')) return
            image.classList.add('active')
            let startX = 0,
                startY = 0,
                storeWidth = 0,
                storeHeight = 0,
                isResizing = false,
                position = ''
            image.onmousedown = (e) => {
                //鼠标左键落下的X、Y位置
                startX = e.clientX
                startY = e.clientY
                // 获取图像的宽高
                storeWidth = image.clientWidth
                storeHeight = image.clientHeight
                isResizing = true
            }

            document.onmousemove = (e) => {
                e.preventDefault()
                const target = e.target

                let x = e.clientX,
                    y = e.clientY,
                    distanceX = x - startX,
                    distanceY = y - startY,
                    width = 0,
                    height = 0
                // 鼠标左键已落下，图像将要进行拉伸
                if (isResizing) {
                    if (!position) return
                    if (position === 'bottom right') {
                        /*
                            右下角  
                            distanceX值为正,distanceY值为正，图像宽高变大；
                            distanceX值为负,distanceY值为负，图像宽高变小
                        */
                        width = storeWidth + distanceX
                        height = storeHeight + distanceY
                    } else if (position === 'top left') {
                        /*
                            左上角正好与右下角相反
                            distanceX值为正,distanceY值为正，图像宽高变大；
                            distanceX值为负,distanceY值为负，图像宽高变小
                        */
                        width = storeWidth - distanceX
                        height = storeHeight - distanceY
                    } else if (position === 'top right') {
                        /*
                            右上角
                            distanceX值为正,distanceY值为负，图像宽高变大；
                            distanceX值为负,distanceY值为正，图像宽高变小
                        */
                        width = storeWidth + distanceX
                        height = storeHeight - distanceY
                    } else if (position === 'bottom left') {
                        /*
                            左下角
                            distanceX值为负,distanceY值为正，图像宽高变大；
                            distanceX值为正,distanceY值为负，图像宽高变小
                        */
                        width = storeWidth - distanceX
                        height = storeHeight + distanceY
                    }

                    if (!width && !height) {
                        return;
                    }
                    // 目标尺寸
                    let imageWidth = 0,
                     imageHeight = 0;
                    // 图像的原始比例
                    const ratio = storeWidth / storeHeight
                    // 选择移动距离大的方向
                    if (Math.abs(distanceX) > Math.abs(distanceY)) {
                        // 宽度变化为主
                        imageWidth = width;
                        imageHeight = width / ratio;
                    } else {
                        // 高度变化为主
                        imageHeight = height;
                        imageWidth = height * ratio;
                    }
                    // 最终设置图片的尺寸
                    image.style.width = Math.round(imageWidth) + 'px'
                    image.style.height = Math.round(imageHeight) + 'px'
                } else {
                    if (target !== image || !target.classList.contains('active')) return

                    // 鼠标左键未落下，图片不会拉伸

                    const { top, left, bottom, right } = image.getBoundingClientRect()
                    //左上角或右下角
                    if ((bottom - y < 20 && right - x < 20) || (x - left < 20 && y - top < 20)) {
                        image.style.cursor = 'nwse-resize'
                        // 右下角
                        if (bottom - y < 20) {
                            position = 'bottom right'
                            return
                        }
                        position = 'top left'

                        //左下角或右上角
                    } else if ((y - top < 20 && right - x < 20) || (bottom - y < 20 && x - left < 20)) {
                        image.style.cursor = 'nesw-resize'
                        // 右上角
                        if (y - top < 20) {
                            position = 'top right'
                            return
                        }

                        position = 'bottom left'

                        //若都不是，鼠标光标为默认箭头样式
                    } else {
                        image.style.cursor = 'default'
                        position = ''
                    }
                }
            }

            document.onmouseup = () => {
                isResizing = false
            }
        }

        document.onclick = (e) => {
            if (e.target === image) return
            image.classList.remove('active')
            document.onmousemove = null
        }
    </script>
</body>

</html>